<div class="gallery">
{{if gallery_nav.length}}
<div class="gallery-tree-header">{{!tree}}</div>
<div class="gallery-nav">
{{foreach item in gallery_nav}}
<div class="nav-item">
	<div><a href="{{action}}{{item.id}}/"><img src="{{preview(2):item.image_url}}"/></a></div>
	<a href="{{action}}{{item.id}}/">{{item.name}}</a>
</div>
{{/foreach}}
<div style="clear: both;"></div>
</div>
{{/if}}

{{if gallery_images.length}}
<div id="gallery" class="galleriffic-content">
	<div id="controls" class="controls"></div>
	<div class="slideshow-container">
		<div id="loading" class="loader"></div>
		<div id="slideshow" class="slideshow"></div>
	</div>
	<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="galleriffic-navigation">
	<ul class="thumbs noscript">
		{{foreach img in gallery_images}}
		<li>
			<a class="thumb" name="{{img.name}}" href="{{img.filename_only}}-preview9.{{img.ext}}" title="{{img.name}}"><img src="{{img.filename_only}}-preview8.{{img.ext}}" alt="{{img.name}}" /></a>
			<div class="caption">
				<div class="download">
					<a href="{{img.filename_only}}.{{img.ext}}">{{!download_original}}</a>
				</div>
				<div class="image-title">{{img.name}}</div>
<!--					<div class="image-desc">Description</div>-->
			</div> 
		</li>
		{{/foreach}}
	</ul>
</div>

<script type="text/javascript"> 
$('div.galleriffic-navigation').css({ 'float' : 'left'});
$('div.galleriffic-navigation').addClass('galleriffic-navigation-js-on');
$('div.galleriffic-content').css('display', 'block');

var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
	mouseOutOpacity:   onMouseOutOpacity,
	mouseOverOpacity:  1.0,
	fadeSpeed:         'fast',
	exemptionSelector: '.selected'
});

var gallery = $('#thumbs').galleriffic({
	delay:                     2500,
	numThumbs:                 15,
	preloadAhead:              10,
	enableTopPager:            true,
	enableBottomPager:         true,
	maxPagesToShow:            7,
	imageContainerSel:         '#slideshow',
	controlsContainerSel:      '#controls',
	captionContainerSel:       '#caption',
	loadingContainerSel:       '#loading',
	renderSSControls:          true,
	renderNavControls:         true,
	playLinkText:              '{{!play_slideshow}}',
	pauseLinkText:             '{{!pause_slideshow}}',
	prevLinkText:              '{{!previous_photo}}',
	nextLinkText:              '{{!next_photo}}',
	nextPageLinkText:          '{{!next_page}}',
	prevPageLinkText:          '{{!prev_page}}',
	enableHistory:             true,
	autoStart:                 false,
	syncTransitions:           true,
	defaultTransitionDuration: 900,
	onSlideChange:             function(prevIndex, nextIndex) {
		// 'this' refers to the gallery, which is an extension of $('#thumbs')
		this.find('ul.thumbs').children()
			.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
			.eq(nextIndex).fadeTo('fast', 1.0);
	},
	onPageTransitionOut:       function(callback) {
		this.fadeTo('fast', 0.0, callback);
	},
	onPageTransitionIn:        function() {
		this.fadeTo('fast', 1.0);
	}
});
function pageload(hash) {
	if(hash) {
		$.galleriffic.gotoImage(hash);
	} else {
		gallery.gotoIndex(0);
	}
}
$.history.init(pageload);
$("a[rel='history']").live('click', function(e) {
	if (e.button != 0) return true;
	var hash = this.href;
	hash = hash.replace(/^.*#/, '');
	$.history.load(hash);
	return false;
});
</script>
{{/if}}

</div>
